<template >
  <div class="box">
    <div>
      <el-form ref="form" :inline="true" :model="form" label-width="80px">
        <el-form-item label="订单编号">
          <el-input
            placeholder="订单编号"
            v-model="form.orderNumber"
          ></el-input>
        </el-form-item>
        <el-form-item label="下单时间">
          <el-date-picker
            value-format="yyyy-MM-DD HH:mm:ss"
            v-model="form.date"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select
            clearable
            v-model="form.region"
            placeholder="请选择订单状态"
          >
            <el-option label="待付款" :value="1"></el-option>
            <el-option label="待发货" :value="2"></el-option>
            <el-option label="待收货" :value="3"></el-option>
            <el-option label="待评价" :value="4"></el-option>
            <el-option label="成功" :value="5"></el-option>
            <el-option label="失败" :value="6"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="open">导出待发货订单</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="setxls">导出销售记录</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="clear">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content">
      <div class="title">
        <div class="one">商品</div>
        <div class="two">成交单价/购买数量</div>
        <div class="three">实付金额</div>
        <div class="four">支付方式</div>
        <div class="five">订单状态</div>
        <div class="six">操作</div>
      </div>

      <div v-for="(item, index) in datalist" :key="index" class="nb">
        <div class="tit">
          订单编号：{{ item.orderNumber }} 下单时间：{{ item.createTime }}
        </div>
        <div class="prod-cont">
          <div class="orderimg">
            <div
              v-for="(item2, index2) in item.orderItems"
              :key="index2"
              class="orderimg-size"
            >
              <!-- {{ item2.pic}} -->
              <div class="left">
                <img
                  :src="
                    'http://admin.yami.byesame.com/apis/mall4j/img/' + item2.pic
                  "
                  alt=""
                />
              </div>
              <div class="center">
                <div>{{ item2.prodName }}</div>
                <div>{{ item2.skuName }}</div>
              </div>
              <div class="right">
                <div>￥{{ item2.productTotalAmount }}</div>
                <div>x{{ item2.prodCount }}</div>
              </div>
            </div>
          </div>

          <div class="money">
            <p class="one">￥{{ item.actualTotal }}</p>
            <p>共{{ item.status }}件</p>
          </div>
          <div class="paytype">
            <div>
              {{ item.payType == 1 ? "微信支付" : "手动代付" }}
            </div>
          </div>
          <div class="status">
            <div>
              {{
                item.status == 1
                  ? "待付款"
                  : item.status == 2
                  ? "待发货"
                  : item.status == 3
                  ? "待收货"
                  : "待评价"
              }}
            </div>
          </div>

          <div class="look">
            <template>
              <span @click="openDialog(item.orderNumber)">查看</span>
            </template>
          </div>
        </div>
        <div class="remark">备注：</div>
      </div>
    </div>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- =================================== -->
    <el-dialog title="查看" :visible.sync="dialogVisible" width="70%">
      <div>订单编号：{{ dialogdata.orderNumber }}</div>
      <div class="steps">
        <el-steps :active="dialogdata.status" finish-status="success">
          <el-step title="提交订单"></el-step>
          <el-step
            title="买家已付款"
            :description="dialogdata.payTime"
          ></el-step>
          <el-step
            title="卖家已发货"
            :description="dialogdata.dvyTime"
          ></el-step>
          <el-step title="买家已收货"></el-step>
        </el-steps>
      </div>
      <div class="oknow">
        <div>
          订单状态 :
          <el-tag class="orderinfo" type="warning">{{
            fomtext(dialogdata.status)
          }}</el-tag>
        </div>
        <div>
          <el-button v-if="dialogdata.status == 2" size="mini" type="primary" @click="getexp(dialogdata.orderNumber)"
            >发货</el-button
          >
        </div>
      </div>
      <div class="oder-content">
        <div class="top">
          <div class="left">
            <i class="el-icon-truck"></i>买家付款后才可以发货
          </div>
          <div class="right">·买家</div>
        </div>
        <div class="cc">
          <div class="get">
            <div class="name">
              <i class="el-icon-location-outline"></i>收货人：{{
                dialogdata.userAddrOrder.receiver
              }}
            </div>
            <div class="mobile">手机:{{ dialogdata.userAddrOrder.mobile }}</div>
            <div class="address">
              收货地址:{{
                dialogdata.userAddrOrder.area +
                dialogdata.userAddrOrder.city +
                dialogdata.userAddrOrder.province +
                dialogdata.userAddrOrder.addr
              }}
            </div>
            <div class="invoice">
              <i class="el-icon-c-scale-to-original"></i>
              不开发票
            </div>
          </div>
          <div class="set">
            <div><i class="el-icon-chat-dot-square"></i>买家备注:{{}}</div>
          </div>
        </div>
        <div class="fomer">
          <div class="top2">
            <div class="one">商品</div>
            <div class="two">单价</div>
            <div class="three">数量</div>
            <div class="four">总价</div>
          </div>
          <div
            class="center"
            v-for="(item, index) in dialogdata.orderItems"
            :key="index"
          >
            <div class="one">
              <img :src="item.pic" alt="" />
              <p>
                {{ item.prodName }}
              </p>
            </div>
            <div class="two">
              {{ item.price }}
            </div>
            <div class="three">
              {{ item.prodCount }}
            </div>
            <div class="four">
              {{ item.price }}
            </div>
          </div>
        </div>
        <div>
          <h3>订单日志</h3>
          <p v-if="dialogdata.createTime">
            {{ dialogdata.createTime }}订单更新（成功）
          </p>
          <p v-if="dialogdata.payTime">
            {{ dialogdata.payTime }}订单付款（成功）
          </p>
          <p v-if="dialogdata.dvyTime">
            {{ dialogdata.dvyTime }}订单发货（成功）
          </p>
          <!-- <p>订单完成（成功）</p> -->
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="warning" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- ==================== -->
    <el-dialog
      title="请输入发货信息"
      :visible.sync="dialogVisible2"
      width="40%"
    >
      <el-form
        :model="formlong"
        :rules="rules"
        ref="formlong"
        class="demo-ruleForm"
      >
        <el-form-item
          label="发件人姓名"
          :label-width="formLabelWidth"
          prop="consignmentName"
        >
          <el-input
            v-model="formlong.consignmentName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="发货人手机号"
          :label-width="formLabelWidth"
          prop="consignmentMobile"
        >
          <el-input
            v-model="formlong.consignmentMobile"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="发货地址"
          :label-width="formLabelWidth"
          prop="consignmentAddr"
        >
          <el-input
            v-model="formlong.consignmentAddr"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('formlong')">取 消</el-button>
        <el-button type="primary" @click="setxlxone('formlong')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!--  发货 -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible3">
      <el-form :model="formkd" :rules="rules2" ref="formkd">
        <el-form-item
          label="快递公司"
          prop="dvyId"
          :label-width="formLabelWidth"
        >
          <el-select v-model="formkd.dvyId" placeholder="请选择">
            <el-option
              v-for="item in kds"
              :key="item.dvyId"
              :label="item.dvyName"
              :value="item.dvyId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="快递单号"
          prop="dvyFlowId"
          :label-width="formLabelWidth"
        >
          <el-input v-model="formkd.dvyFlowId" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('formkd')">取 消</el-button>
        <el-button type="primary" @click="submitForm('formkd')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getList,
  details,
  exportExcel,
  exportExceloder,
  getExpress,
  sendGoods,
} from "@/api/wrkorder";
import { saveAs } from "file-saver";
export default {
  data() {
    return {
      currentPage: 10,
      datalist: [],
      formLabelWidth: "120px",
      form: {
        orderNumber: null,
        status: null,
        date: [],
        region: null,
      },
      kds: "",
      form2: {
        orderNumber: null,
        status: null,
        date: [],
        region: null,
      },

      dialogVisible: false,
      dialogVisible2: false,
      dialogFormVisible3: false,
      formlong: {},
      dialogdata: {
        userAddrOrder: {},
      },
      formkd: {
        orderNumber: null,
        dvyFlowId: "",
        dvyId: null,
      },
      pageSize: 10,
      total: 0,
      rules: {
        consignmentName: [
          { required: true, message: "请输入发货人姓名", trigger: "blur" },
        ],
        consignmentMobile: [
          { required: true, message: "请输入发货人手机号", trigger: "blur" },
        ],
        consignmentAddr: [
          { required: true, message: "请输入发货地址", trigger: "blur" },
        ],
      },
      rules2: {
        dvyId: [
          { required: true, message: "请选择快递公司", trigger: "change" },
        ],
        dvyFlowId: [
          { required: true, message: "请输入快递单号", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    async getlist() {
      // 数据获取
      getList({
        current: this.currentPage,
        size: this.pageSize,
        orderNumber: this.form2.orderNumber,
        status: this.form2.region,
        startTime: this.form2.date[0],
        endTime: this.form2.date[1],
      }).then((res) => {
        console.log(res);
        this.datalist = res.data.records;
        this.total = res.data.total;
        console.log(res.data.records);
      });
    },
    // 点击搜索
    onSubmit() {
      console.log(this.form);
      if (this.form.date == null) {
        this.form.date = [];
      }
      this.form2 = JSON.parse(JSON.stringify(this.form));
      this.currentPage = 1;
      this.getlist();
    },
    // 分页器
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getlist();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getlist();
    },
    // 清空
    clear() {
      this.form = {
        orderNumber: null,
        date: [],
        status: null,
      };
      this.form2 = {
        orderNumber: null,
        date: [],
        status: null,
      };
      this.getlist();
    },
    date() {
      let t = Date.now();
      return t;
    },
    // 打开弹框 查看按钮
    openDialog(eve) {
      console.log(111111111);

      this.dialogVisible = true;
      console.log(eve);
      details(eve, { t: this.date() }).then((res) => {
        console.log(res);
        this.dialogdata = res.data;
      });
    },
    // 标签状态格式化
    fomtext(status) {
      if (status == 1) {
        return "待付款";
      } else if (status == 2) {
        return "待发货";
      } else if (status == 3) {
        return "待收货";
      } else if (status == 4) {
        return "已完成";
      } else if (status == 5) {
        return "已完成";
      }
    },
    // 导出数据

    open() {
      this.dialogVisible2 = true;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogVisible2 = false;
      this.dialogFormVisible3 = false;
    },
    setxlxone(formName) {
      console.log(123);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          exportExcel({
            consignmentName: this.formlong.consignmentName,
            consignmentMobile: this.formlong.consignmentMobile,
            consignmentAddr: this.formlong.consignmentAddr,
          }).then((res) => {
            const blob = new Blob([res], {
              type: "application/vnd.ms-excel", // Excel 的 MIME 类型
            });
            saveAs(blob, "待发货信息整理.xlsx");
            console.log(blob);
          });
        }
      });
    },
    setxls() {
      exportExceloder().then((res) => {
        const blob = new Blob([res], {
          type: "application/vnd.ms-excel", // Excel 的 MIME 类型
        });
        saveAs(blob, "销售信息整理.xlsx");
        console.log(blob);
      });
    },
    getexp(e) {
      console.log(e);
      this.formkd.orderNumber = e;
      this.dialogFormVisible3 = true;
      getExpress().then((res) => {
        console.log(res);
        this.kds = res.data;
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          sendGoods({ ...this.formkd }).then((res) => {
            console.log(res);
            this.$message({
              message: "发货成功",
              type: "success",
            });
            this.dialogFormVisible3 = false;
            this.getlist();
          });
        }
      });
    },
  },
  created() {
    this.getlist();
  },
};
</script>

<style lang="scss" scoped>
.box {
  margin: 30px;
  padding: 20px;
  background-color: #fcfcfc;
}
.content {
  .title {
    display: flex;
    justify-content: space-between;
    text-align: right;
    height: 40px;
    line-height: 40px;
    .one {
      flex: 3;
      text-align: left;
    }
    .two {
      flex: 2;
    }
    .three {
      flex: 2;
    }
    .four {
      flex: 2;
    }
    .five {
      flex: 2;
    }
    .six {
      flex: 2;
    }
  }
  .nb {
    margin-bottom: 20px;
  }
  .tit {
    border: 1px solid #dddee1;
    height: 36px;
    line-height: 36px;
  }
  .tit {
    border: 1px solid #dddee1;
    height: 36px;
    line-height: 36px;
    background-color: #f8f8f9;
    padding-left: 20px;
  }
  .prod-cont {
    padding-left: 40px;
    display: flex;
    background-color: #fff;
    justify-content: space-between;
    border-left: 1px solid #dddee1;
    .orderimg {
      flex: 5;
      border-right: 1px solid #dddee1;
      display: flex;
      justify-content: space-between;
      width: 100%;
      flex-wrap: wrap;
      .orderimg-size {
        // background-color: #ecafaf80;
        display: flex;
        // flex: 1;
        // border-left: 1px solid #dddee1;

        padding: 20px 0;
        // 怪异盒模型
        box-sizing: border-box;
        img {
          width: 100px;
          height: 100px;
          margin: 10px;
          border: 1px solid #dddee1;
        }
        .center {
          flex: 10;
          width: 300rx;
        }
        .right {
          // text-align: right;
          width: 50px;
          margin-right: 20px;
        }
      }
    }

    .money {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      flex: 2;
      border-right: 1px solid #dddee1;
      // background-color: hsla(51, 89%, 75%, 0.523);
      p {
        height: 20px;
        line-height: 20px;
      }
      .one {
        color: rgb(197, 0, 0);
      }
    }
    .paytype {
      text-align: center;
      flex: 2;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      // background-color: #a95e5e;
      border-right: 1px solid #dddee1;
    }
    .status {
      text-align: center;
      flex: 2;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      // background-color: #60a08a70;
      border-right: 1px solid #dddee1;
    }
    .look {
      text-align: center;
      flex: 2;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      // background-color: #a95e5e;
      border-right: 1px solid #dddee1;
      color: #3ca1ea;
      cursor: pointer;
    }
  }
  .remark {
    height: 40px;
    line-height: 40px;
    border: 1px solid #dddee1;
    background-color: #eaf7f6;
    padding-left: 20px;
  }
}
.page {
  margin-top: 20px;
  display: flex;
  justify-content: right;
}
.steps {
  width: 60%;
  margin: 0 auto;
  margin-top: 20px;
}
.warning {
  margin-left: 20px;
}
.oder-content {
  margin-top: 70px;
  .top {
    border-top: 1px solid #dddee1;
    display: flex;
    height: 50px;
    line-height: 50px;

    .left {
      width: 100%;
      border-right: 1px solid #dddee1;
    }
    .right {
      width: 100%;
    }
  }
  .cc {
    display: flex;
    // margin-bottom: 20px;
    .set {
      width: 100%;
      border-left: 1px solid #dddee1;
      div {
        height: 40px;
        line-height: 40px;
      }
    }
    .get {
      width: 100%;
      div {
        height: 40px;
        line-height: 40px;
      }
    }
  }
  .fomer {
    margin-top: 10px;
    border: 1px solid #dddee1;
    .top2 {
      display: flex;
      justify-content: space-between;
      height: 30px;
      line-height: 30px;
      border-bottom: 1px solid #dddee1;
      .one {
        flex: 4;
        padding-left: 40px;
        border-right: 1px solid #dddee1;
      }
      .two {
        flex: 1;
        border-right: 1px solid #dddee1;
      }
      .three {
        flex: 1;
        border-right: 1px solid #dddee1;
      }
      .four {
        flex: 1;
      }
    }
    .center {
      display: flex;
      justify-content: space-between;
      .one {
        flex: 4;
        display: flex;
        border-right: 1px solid #dddee1;
        padding-left: 40px;
        img {
          width: 100px;
          height: 100px;
          margin: 20px;
          border: 1px solid #dddee1;
        }
        p {
          padding-left: 20px;
        }
      }
      .two {
        flex: 1;
        border-right: 1px solid #dddee1;
      }
      .three {
        flex: 1;
        border-right: 1px solid #dddee1;
      }
      .four {
        flex: 1;
      }
    }
  }
}
.oknow {
  display: flex;
  justify-content: space-between;
}
</style>